:root {
    font-size: 15px;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
body {
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    flex-flow: column nowrap;
    background-color: #f82121;
    letter-spacing: 0.1rem;
    /* 窗口可拖拽 */
    /* -webkit-app-region: drag; */
}
/* 按钮不可拖拽 */
button {
    -webkit-app-region: no-drag;
}

.timer-container {
    height: 40vh;
    transition: all 0.3s ease;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 3em;
    color: white;
    -webkit-user-select: none;
    -webkit-app-region: drag;
}
.progressbar {
    width: 70vw;
    max-width: 1000px;
    stroke-linecap: round; /* 设置进度条首尾圆角 */
    /* 禁用文本选中 */
    -webkit-user-select: none;
    -webkit-app-region: drag;
}

/* 模态对话框 */
#action {
    border: none;
    border-radius: 0.5rem;
}

/* 模态框背后背景部分 */
#action::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}
.btn-container {
    width: 60vw;
    display: flex;
    justify-content: space-between;
}
.btn {
    padding: 0.3rem 0.7rem;
    border: none;
    border-radius: 0.4rem;
    color: white;
    letter-spacing: 0.2rem;
}

.btn.start_btn {
    background-color: #4caf50;
    padding: 0.4rem 1.5rem;
}
.btn.reset_btn {
    position: fixed;
    left: 50%;
    bottom: -50px;
    transform: translateX(-50%);
    opacity: 0;
    transition: all 0.3s ease;
}
.btn.reset_btn.reset_btn__show {
    display: block;
    bottom: 15vh;
    opacity: 1;
}
.btn.reset_btn.reset_btn__hidden {
    display: block;
    bottom: 0;
    opacity: 0;
}
.btn.work_btn {
    background-color: #f44336;
}
.btn.rest_btn {
    background-color: #4caf50;
}
